<!--玩家详情-->
<template>
    <div class="app-container">

      <div style="border-radius: 10px; background-color: #FFFFFF; padding: 20px; border: 1px solid #EEEEEE; margin-top: 40px;">
        <el-form ref="form" :rules="rules" :model="wxForm" label-width="120px">
           <el-row>
            <el-col :span="12">
            <el-form-item label="ID：" prop="ID"> <span>{{ wxForm.wxId }}</span>
            </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
            <el-form-item label="姓名：" prop="mafiaUpRatio">
              <el-input placeholder="微信名称" v-model="wxForm.wxName"> </el-input>
            </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
            <el-form-item label="推荐人：" prop="refereeWxId">
              <el-input placeholder="推荐人" v-model="wxForm.refereeWxId" > </el-input>
            </el-form-item>
            </el-col>
            <el-col :span="12">
            <el-form-item label="保险人：" prop="insurerWxId">
              <el-input placeholder="保险人" v-model="wxForm.insurerWxId"> </el-input>
            </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="德州返水        上：" prop="mafiaUpRatio">
                <el-input
                  placeholder="德州返水上分"
                  v-model.number="mafiaUpRatioDisplay"
                  :readonly="!isEditable">
                  <template #append>%</template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="下：" prop="mafiaDownRatio">
                <el-input
                  placeholder="德州返水下分"
                  v-model.number="mafiaDownRatioDisplay"
                  :readonly="!isEditable">
                  <template #append>%</template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="反保比例：" prop="mafiaInsuranceRatio">
                <el-input
                  placeholder="德州反保比例"
                  v-model.number="mafiaInsuranceRatioDisplay"
                  :readonly="!isEditable" >
                  <template #append>%</template>
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="牛仔返水        上：" prop="texasUpRatio">
                <el-input
                  placeholder="牛仔返水上分"
                  v-model.number="texasUpRatioDisplay"
                  :readonly="!isEditable">
                  <template #append>%</template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="下：" prop="texasDownRatio">
                <el-input
                  placeholder="牛仔返水下分"
                  v-model.number="texasDownRatioDisplay"
                  :readonly="!isEditable">
                  <template #append>%</template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="反保比例：" prop="texasInsuranceRatio">
                <el-input
                  placeholder="牛仔反保比例"
                  v-model.number="texasInsuranceRatioDisplay"
                  :readonly="!isEditable">
                  <template #append>%</template>
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
            <el-form-item label="" prop="mafiaUpRatio">
              <el-input placeholder="备注信息"
                  v-model="wxForm.remark"
                  type="textarea"
                  :autosize="{ minRows: 4, maxRows: 4 }"
                  :readonly="!isEditable"> </el-input>
            </el-form-item>
            </el-col>
          </el-row>
          <el-row >
          <el-col :span="18" >
            <el-form-item label="" prop="mafiaUpRatio"></el-form-item>
          </el-col>
          <el-col :span="6" >
            <el-button type="primary"  style="width: 100%;" @click="updateWxInfo()">{{ isEditable ? '保存' : '点击修改' }}</el-button>
          </el-col>
          </el-row>
        </el-form>
      </div>
      <div style="border-radius: 10px; background-color: #FFFFFF; padding: 20px; border: 1px solid #EEEEEE; margin-top: 40px; margin-bottom: 60px;">
      <h1>局内关联账号</h1>
        <el-form :model="playerParams" ref="playerQueryForm" size="small" :inline="true" v-show="true" label-width="88px">
          <el-form-item label="新增关联：">
            <el-select
              style="width: 220px"
              v-model="playerParams.playerId"
              @change="handlePlayerSelect"
              filterable
              remote
              reserve-keyword
              placeholder="搜索玩家"
              :remote-method="searchPlayer"
              :loading="playerSelectLoading"
              clearable >

              <el-option
                  v-for="item in playerOptions"
                  :key="item.playerId"
                  :label="item.playerId + ' ' + item.nickname"
                  :value="item.playerId">
                </el-option>
            </el-select>
          </el-form-item>

          <el-form-item>
             <el-button type="primary" icon="el-icon-plus" size="mini" @click="bindRelation">关联</el-button>
          </el-form-item>
        </el-form>

        <el-table v-loading="wxRelationLoading" :data="wxRelationData">
          <el-table-column
            label="玩家Id"
            align="center"
            prop="playerId"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            label="玩家昵称"
            align="center"
            prop="nickname"
            :show-overflow-tooltip="true"
          />
          <el-table-column label="操作" align="center" >
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                @click="unbindRelation(scope.row)">解绑</el-button
              >
             <el-button
                size="mini"
                type="text"
                @click="goPlayerInfo(scope.row)">查看详细</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
</template>
<script>

import {
  getPlayerInfo,
  getPlayerWxRelation,
  searchPlayerList,
  bindOrUnbindWx,
} from "@/api/account/player.js";
import {
  getWxInfo,
  getBindPlayers,
  unbindWxAndPlayer,
  goUpdateWeChat,
} from "@/api/account/wx.js";

export default {
  data(){
    return{
     playerParams: {
        playerId: undefined,
     },
     playerQueryForm:{
     },
     selectedPlayer: null,
     wxLoading: false,
     isEditable: false,
     wxForm: {
        id: -1,
        deptId: "",
        wxId: "",
        wxName: "",
        refereeWxId:"",
        insurerWxId:"",
        remark:0,
        mafiaUpRatio:0.00,
        mafiaDownRatio:0.00,
        mafiaInsuranceRatio:0.00,
        texasUpRatio:0.00,
        texasDownRatio:0.00,
        texasInsuranceRatio:0.00,
        createTime:undefined,
     },
     rules: {
        wxId: [{ required: true, message: "请输入俱乐部id", trigger: "blur" }],
        texasUpRatio: [
            { validator: (rule, value, callback) => {
              if (value < -1 || value > 1) {
                callback(new Error('取值范围在-1~1之间'));
              } else {
                callback();
              }
            }, trigger: 'blur' }
          ],
        texasDownRatio: [
            { validator: (rule, value, callback) => {
              if (value < -1 || value > 1) {
                callback(new Error('取值范围在-1~1'));
              } else {
                callback();
              }
            }, trigger: 'blur'}
          ],
        texasInsuranceRatio: [
            { validator: (rule, value, callback) => {
              if (value < -1 || value > 1) {
                callback(new Error('取值范围在-1~1'));
              } else {
                callback();
              }
            }, trigger: 'blur' }
          ],
      },
     playerSelectLoading:false,
     playerOptions:[],

     wxRelationLoading: false,
     wxRelationData: [],
     wxRelationForm: {
             wxId: "",
             wxName: "",
             playerId: "",
             playerNickname: "",
     },
    }
  },
  mounted(){
    this.getWxDetails()
    this.getBindRelations()
  },
  methods:{

    getWxDetails (){
      let params = {
            id: this.$route.query.id,
          };
      this.wxLoading = true;
      getWxInfo(params).then((res) => {
         this.wxForm = res.data;
         this.wxInfoLoading = false;
         console.log("getWxInfo success:", this.wxForm);
      }).catch((error) => {
         // 处理接口异常
         console.error("getWxInfo error:", error);
         this.wxLoading = false;
      });
    },

    updateWxInfo() {
        if (this.isEditable) {
          this.wxInfoLoading = false;
          console.log("updateWxInfo this.wxForm.mafiaUpRatio :", this.wxForm.mafiaUpRatio);

          goUpdateWeChat(this.wxForm).then((res) => {
                   this.isEditable = false;
                   this.wxInfoLoading = false;
                   console.log("updateWxInfo success:");
                }).catch((error) => {
                   // 处理接口异常
                   console.error("updateWxInfo error:", error);
                   this.wxLoading = false;
                });
        } else {
          this.isEditable = true;
        }
    },

    handlePlayerSelect(playerId) {
        console.log('handlePlayerSelect item:', playerId);
        // 找到选择的 item
        this.selectedPlayer = this.playerOptions.find(item => item.playerId === playerId);
        // 您可以在这里进行其他操作,比如保存选择的 item
        console.log('handlePlayerSelect player:', this.selectedPlayer);
    },

    // 玩家关联微信
    getBindRelations() {
      let params = {
        id: this.$route.query.id,
      };
      console.log("getBindRelations playerId :", params.playerId)
      this.wxRelationLoading = true
      getBindPlayers(params).then((res) => {
         this.wxRelationData = res.rows
         console.log("getBindRelations success:", res.rows[0]);
         console.log("First record in res.rows:", JSON.stringify(res.rows[0], null, 2));
         this.wxRelationLoading = false
      }).catch((error) => {
         // 处理接口异常
         console.error("getBindRelations error:", error);
         this.wxRelationData = []
         this.wxRelationLoading = false
      });
    },

    bindRelation() {
       this.selectedPlayer.refPlayerWxId = this.$route.query.id
       bindOrUnbindWx(this.selectedPlayer).then((res) => {
          console.log("bindRelation ", res);
          this.getBindRelations()
       }).catch((error) => {
          console.error("bindRelation error:", error);
       });
    },

    // 取消关联
    unbindRelation(row) {
       console.error("unbindRelation :", this.playerParams.playerId, this.playerParams.wxId)
       row.refPlayerWxId = undefined;
       bindOrUnbindWx(row).then((res) => {
          console.log("unbindRelation ", res);
          this.getBindRelations()
       }).catch((error) => {
          console.error("unbindRelation error:", error);
       });
    },

    // 模糊查询玩家
    searchPlayer(query) {
      if (query !== "") {
        this.playerSelectLoading = true;
        searchPlayerList({ key: query }).then((res) => {
          this.playerOptions = res.rows;
          this.playerSelectLoading = false;
        }).catch((error) => {
          this.playerSelectLoading = false;
          console.error("getBindRelations error:", error);
          this.playerSelectLoading = []
          });
      } else {
        this.playerOptions = [];
      }
    },

    // 跳转玩家详情
    goPlayerInfo(row) {
      this.$router.push({
        path: "/player/detail",
        query: { id: row.playerId },
      });
    },

    // 返回上一页
    goBack(){
      this.$router.go(-1);
    },
    handleInput(field, value) {
      let ratio;
      if (isNaN(parseFloat(value))) {
        ratio = 0; // 如果输入值无法转换为数字,则设置为 0
      } else {
        ratio = parseFloat(value) / 100;
      }
      this.$set(this.wxForm, field, ratio);
      console.log("handleInput ", value, field, ratio)
    },
  },
  // 在Vue实例中定义计算属性
  computed: {
      mafiaUpRatioDisplay: {
          get() {
              return this.wxForm.mafiaUpRatio * 100;
          },
          set(value) {
              this.wxForm.mafiaUpRatio = value / 100;
          }
      },
      mafiaDownRatioDisplay: {
          get() {
              return this.wxForm.mafiaDownRatio * 100;
          },
          set(value) {
              this.wxForm.mafiaDownRatio = value / 100;
          }
      },
      mafiaInsuranceRatioDisplay: {
          get() {
              return this.wxForm.mafiaInsuranceRatio * 100;
          },
          set(value) {
              this.wxForm.mafiaInsuranceRatio = value / 100;
          }
      },
      texasUpRatioDisplay: {
          get() {
              return this.wxForm.texasUpRatio * 100;
          },
          set(value) {
              this.wxForm.texasUpRatio = value / 100;
          }
      },
      texasDownRatioDisplay: {
          get() {
              return this.wxForm.texasDownRatio * 100;
          },
          set(value) {
              this.wxForm.texasDownRatio = value / 100;
          }
      },
      texasInsuranceRatioDisplay: {
          get() {
              return this.wxForm.texasInsuranceRatio * 100;
          },
          set(value) {
              this.wxForm.texasInsuranceRatio = value / 100;
          }
      },
  }
}
</script>

<style lang="scss" scoped>
.ratio-input {
  display: flex;
  align-items: center;
}

.ratio-input .el-input {
  flex-grow: 1;
  margin-right: 8px;
}
</style>

